<template>
  <back-item :title="title"></back-item>
  <div
    class="animated fadeInLeft user-top"
    style="height: calc(100vh - 60px); background: #f6f6f6"
  >
    <!-- 金币购买 -->
    <div class="gold-group">
      <div class="fcolor">金币充值</div>
      <div class="gold-list">
        <div
          class="gold"
          v-for="item of commonShopList"
          :key="item.id"
          :class="{ active: form.shopId === item.id }"
          @click="chooseShop(item.id)"
        >
          <div class="ribbon" v-if="form.shopId === item.id"></div>
          <div>
            ￥{{ item.price }}
            <span style="font-size: 14px; color: #525252; font-weight: 500">
              ({{ item.gold || 0 }}金币)
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="gold-group">
      <div class="fcolor">支付方式</div>
      <div class="pay-list">
        <div
          class="pay_type"
          v-for="(item, index) of payType"
          :key="index"
          @click="choosePay(item.type)"
          :class="{ active: form.payType === item.type }"
        >
          <img
            :src="item.icon"
            alt=""
            style="width: 20px; height: 20px; margin-right: 10px"
          />
          {{ item.title }}
          <div class="ribbon" v-if="form.payType === item.type"></div>
        </div>
      </div>
    </div>
    <div class="gold-group">
      <el-button
        color="#ff6666"
        style="color: #fff; font-weight: 600"
        @click="pay"
        :disabled="diabled"
        :v-loading="loading"
        >立即支付</el-button
      >
    </div>
    <div style="width: 100%; text-align: center">
      <div
        style="
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          background: #eee;
        "
        v-loading="buyLoading"
        element-loading-background="rgba(0,0,0,0.5)"
        v-if="qrCode == null ? false : true"
      >
        <el-image style="width: 100px; height: 100px" :src="qrCode" fit="fill">
          <template #error>
            <div class="image-slot">未加载</div>
          </template>
        </el-image>
      </div>
    </div>
    <div
      style="font-size: 14px; padding: 10px; margin-top: 30px"
      class="fcolor"
    >
      温馨提示：
      <p>1. 兑换比例：1元=100币。(只做参考，以具体情况为准)</p>
      <p>2. 具体充值支付方式详见页面所示。</p>
      <p>
        3.您可在“充值页面-我的钱包-交易记录”中查看您的充值订阅记录（如充值单号、充值金额及时间、充值状态、订阅书籍信息等）。
      </p>
      <p>
        4.若充值后帐户余额长时间无变化，请记录您的用户名后联系客服4008813311处理。
      </p>
    </div>
  </div>
</template>

<script setup>
import backItem from "@/components/other/back-item.vue";
import { reactive, ref, onMounted, computed } from "vue";
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";

const title = ref("购买");
const commonShopList = reactive([]);
const payType = ref([
  {
    title: "支付宝",
    type: "alipay",
    icon: require("@/assets/icon/alipay.png"),
  },
  {
    title: "微信",
    type: "weixin",
    icon: require("@/assets/icon/weixin.png"),
  },
]);
const buyLoading = ref(false);
const loading = ref(false);
const form = ref({
  payType: "",
  shopId: null,
});
const qrCode = ref();

const diabled = computed(
  () => form.value.payType === "" || form.value.shopId === null
);

const getVipShopLIst = () => {
  request
    .get("/client/shop/common/list")
    .then((res) => {
      commonShopList.push(...res.data);
    })
    .catch((err) => {
      commonShopList.error(err.message);
    });
};

const pay = () => {
  if (form.value.payType === "" || form.value.shopId === null) {
    ElMessage({
      message: "支付不了，请选择支付方式和套餐~.",
      grouping: true,
      type: "warning",
    });
  }

  if (form.value.payType === "alipay") {
    loading.value = true;
    diabled.value = true;
    buyLoading.value = true;
    insertOne();
  } else if (form.value.payType === "weixin") {
    ElMessage.warning("当前方式还未开通哦~");
  }
};

const insertOne = () => {
  request
    .get(`/pay/alipay?shopId=${form.value.shopId}`)
    .then((res) => {
      if (res.code === 200) {
        qrCode.value = "data:image/png;base64," + res.data;
      }
      buyLoading.value = false;
      loading.value = false;
      diabled.value = false;
    })
    .catch((err) => {
      ElMessage.error(err.message);
      buyLoading.value = false;
      loading.value = false;
      diabled.value = false;
    });
};

const choosePay = (type) => {
  form.value.payType = type;
};

const chooseShop = (id) => {
  form.value.shopId = id;
};

onMounted(() => {
  getVipShopLIst();
});
</script>

<style scoped lang="scss">
.gold-group {
  // background: #f6f6f6;
  padding: 10px;
}

.gold-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin-top: 10px;
}
.gold {
  background: #fff;
  height: 40px;
  padding: 10px;
  display: flex;
  position: relative;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  border-radius: 3px;
}

.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: #ff8585;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.active {
  background: rgba(#fff7f7, 0.8) !important;
  border: 1px solid #ff8585;
}

.pay_type {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 4px 7px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  margin-top: 10px;
}

.pay-list {
  display: flex;
  & > div {
    margin-right: 10px;
  }
}

.image-slot {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
